<template>
    <div class="page">
        <div class="top">
            <div class="top_z">
                <van-icon name="arrow-left" size="20" color="#adadad" v-on:click="back_fn()" />
            </div>
            <div class="top_y">
                <form action="/">
                    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch"
                        @cancel="onCancel" />
                </form>
            </div>

        </div>
        <div class="body">
            <van-tabs v-model:active="active">
                <van-tab title="图文">
                    <van-pull-refresh v-model="loading" @refresh="onRefresh" >
                        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                            <div class="hang">
                                <div class="biaoqian" v-for="item in list" @click="ship_detail(1)">
                                    <div class="biaoqian_z">
                                        <img src="./photo/9.jpg" alt="">
                                    </div>
                                    <div class="biaoqian_y">
                                        <div class="y_s">
                                            <div style="font-size: 20px;">
                                                <span>不织布花朵发卡</span>
                                            </div>
                                            <div style="color: #737373;font-size: 15px;">
                                                <span>装可爱的不织布</span>
                                            </div>
                                        </div>
                                        <div class="y_x">
                                            <span>收藏22&nbsp;&nbsp;评论33&nbsp;赞44</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
                <van-tab title="视频">
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                            <div class="hang">
                                <div class="biaoqian" v-for="item in list">
                                    <div class="biaoqian_z">
                                        <img src="./photo/18.jpg" alt="">
                                    </div>
                                    <div class="biaoqian_y">
                                        <div class="y_s">
                                            <div style="font-size: 20px;">
                                                <span>薰衣草花束</span>
                                            </div>
                                            <div style="color: #737373;font-size: 15px;">
                                                <span>钱多多果然多</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
                <van-tab title="手工圈">
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                            <div class="hang">
                                <div class="biaoqian" v-for="item in list" @click="shougong_fn(1)">
                                    <div class="biaoqian_z">
                                        <img src="./photo/17.jpg" alt="">
                                    </div>
                                    <div class="biaoqian_y">
                                        <div class="y_s">
                                            <!-- <div style="font-size: 20px;">
                                                <span>夏天就该自己亲手做肉肉盆栽</span>
                                            </div> -->
                                            <div style="color: #737373;font-size: 15px;">
                                                <span>夏天就该自己亲手做肉肉盆栽</span>
                                            </div>
                                        </div>
                                        <div class="y_x">
                                            <span>陌上花开</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
                <van-tab title="商品">
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                            <div>
                                <span class="item" v-for="item in list" @click="ship_detail(1)">
                                    <div class="item_img"></div>
                                    <div class="item_money">
                                        <span class="money">手工编织花篮</span><br>
                                        <span class="payed">￥99.9</span>
                                    </div>
                                </span>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
                <van-tab title="用户">
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                            <div>
                                <div class="user" v-for="item in list">
                                    <div class="user_z">
                                        <img src="./photo/11.jpg" alt="">
                                    </div>
                                    <div class="user_y">
                                        握不住的沙
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
            </van-tabs>

        </div>
        <div class="bottom">

        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { Toast } from 'vant';
import { useRouter, useRoute, RouterLink } from 'vue-router'
import { ref, reactive } from 'vue'
import { Tab, Tabs } from 'vant';

const router = useRouter()
const route = useRoute()
const value = ref('');
const active = ref(0);
const onSearch = (val: any) => console.log(val);

function back_fn() {
    router.go(-1)
}
function onCancel() {
    router.push({
        name: 'find',
    })
}

const list: any = ref([]);
const finished = ref(false);
const refreshing = ref(false);

const count = ref(0);
const loading = ref(false);

const onRefresh = () => {
    setTimeout(() => {
        Toast('刷新成功');
        loading.value = false;
        count.value++;
    }, 1000);
};
//加载
const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            list.value = [];
            refreshing.value = false;
        }
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }
        loading.value = false;
        Toast.clear()
        if (list.value.length >= 30) {
            finished.value = true;
            Toast({
                duration: 3000,
                message: '加载完毕',
            })
        }
    }, 1000);

};
function ship_detail(cc: any) {
    router.push({
        path: '/jc_tu',
        query: {
            id: cc
        }
    })
}
function shougong_fn(cc: any) {
    router.push({
        path: '/xiangqing',
        query: {
            id: cc
        }
    })
}
</script>
    
<style scoped>
.page {
    height: 100vh;
    width: 100vw;
}

.top {
    display: flex;
}

.top_z {
    /* flex: 1; */
    padding: 15px 0px 0px 15px;
}

.top_y {
    flex: 1;
}

/* 图文样式 */
.biaoqian {
    border-bottom: 1px solid #eeeeee;
    display: flex;
    margin: 8px 8px 0px 8px;
}

.biaoqian_z {
    flex: 1;
    margin: 0px 8px 8px 0px;
    width: 30vw;
    height: 13vh;
}

.biaoqian_z>img {
    width: 100%;
    height: 100%;
}

.biaoqian_y {
    flex: 1.5;
    margin: 0px 0px 8px 0px;
    display: flex;
    flex-direction: column;
}

.y_s {
    flex: 1;
}

.y_x {
    color: #cacaca;
    font-size: 10px;
}

span {
    width: 100px;
    word-break: break-all;
    overflow: auto;
    white-space: normal;
}

/* 用户样式 */
.user {
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    margin: 8px 8px 0px 8px;
    padding-bottom: 8px;
}

.user_z {
    margin: 0px 10px 0px 0px;
    height: 35px;
    width: 35px;
}

.user_z>img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.user_y {
    flex: 1;
    display: flex;
    align-items: center;
}

/* 图文教程样式 */
.item {
    box-sizing: border-box;
    display: inline-block;
    margin: 10px 10px 0px 10px;
    width: 44vw;
    height: 30vh;
}

.item_img {
    width: 100%;
    height: 75%;
    background-image: url(@/components/cby/photo/7.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}

.item_money {
    /* height: 10%; */
    padding-left: 5px;
}

.item_money>.money {
    font-size: 15px;
    padding-right: 10px;
}

.item_money>.payed {
    font-size: 10px;
    color: #e05a53;
}
</style>